<template>
	<view class="workspace-container">
		<!-- 顶部工具栏 -->
		<view class="top-toolbar">
			<!-- 左侧返回和题目信息 -->
			<view class="left-section">
				<view class="back-btn" @click="goBack">←</view>
				<view class="question-info">
					<text class="question-number">第26题</text>
					<text class="question-score">5分</text>
					<view class="question-divider">≡</view>
				</view>
				<view class="progress-info">
					<text>已阅 80/276</text>
				</view>
			</view>
			
			<!-- 右侧工具菜单 -->
			<view class="right-section">
				<view class="tool-item">
					<view class="tool-icon">💬</view>
					<text class="tool-text">回评</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">🔄</view>
					<text class="tool-text">评分进度</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">📖</view>
					<text class="tool-text">参考答案</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">📝</view>
					<text class="tool-text">批注</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">🏷️</view>
					<text class="tool-text">标记试卷</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">⚙️</view>
					<text class="tool-text">打分方式</text>
				</view>
				<view class="tool-item">
					<view class="tool-icon">⚙️</view>
					<text class="tool-text">设置</text>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 左侧题目列表 -->
			<view class="question-list">
				<view class="question-item">
					<text class="q-number">26.(1)</text>
					<text class="q-score">2分</text>
				</view>
				<view class="question-item active">
					<text class="q-number">26.(2)</text>
					<text class="q-score">3分</text>
				</view>
			</view>

			<!-- 中央试卷图片区域 -->
			<view class="paper-area">
				<view class="paper-image">
					<!-- 模拟试卷内容 -->
					<view class="paper-content">
						<view class="question-text">
							<text class="q-label">26.(1)</text>
							<text class="handwriting">体现了问学的对问题的思考</text>
							<text class="score-mark red">+2</text>
						</view>
						<view class="question-text">
							<text class="q-label">(2)</text>
							<text class="handwriting">写出他人最基本的关心，缺</text>
							<text class="score-mark red">+3</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 右侧打分区域 -->
			<view class="scoring-area">
				<!-- 满分按钮 -->
				<view class="full-score-btn">
					<text class="checkmark">✓</text>
					<text class="btn-text">满分</text>
				</view>
				
				<!-- 零分按钮 -->
				<view class="zero-score-btn">
					<text class="cross">✗</text>
					<text class="btn-text">零分</text>
				</view>
				
				<!-- 数字打分按钮 -->
				<view class="number-buttons">
					<view class="number-btn">1</view>
					<view class="number-btn">2</view>
					<view class="number-btn active">3</view>
					<view class="number-btn">4</view>
					<view class="number-btn">5</view>
					<view class="clear-btn">清空</view>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-submit">
			<view class="submit-btn">提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			taskInfo: {}
		}
	},
	onLoad(options) {
		// 接收传递的任务信息
		if (options.taskId) {
			this.taskInfo.taskId = options.taskId;
		}
		if (options.taskTitle) {
			this.taskInfo.taskTitle = decodeURIComponent(options.taskTitle);
		}
		console.log('接收到的任务信息:', this.taskInfo);
	},
	methods: {
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="less" scoped>
.workspace-container {
	width: 100vw;
	height: 100vh;
	background: #f0f0f0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 顶部工具栏 */
.top-toolbar {
	height: 80rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #e0e0e0;
	flex-shrink: 0;
}

.left-section {
	display: flex;
	align-items: center;
	gap: 30rpx;
}

.back-btn {
	font-size: 36rpx;
	color: #333;
	padding: 5rpx 10rpx;
}

.question-info {
	display: flex;
	align-items: center;
	background: #4DD0E1;
	padding: 8rpx 16rpx;
	border-radius: 6rpx;
	gap: 10rpx;
}

.question-number {
	color: white;
	font-size: 24rpx;
	font-weight: bold;
}

.question-score {
	color: #ff4444;
	font-size: 20rpx;
	font-weight: bold;
}

.question-divider {
	color: white;
	font-size: 18rpx;
}

.progress-info {
	font-size: 22rpx;
	color: #666;
}

.right-section {
	display: flex;
	gap: 25rpx;
}

.tool-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
	padding: 5rpx;
}

.tool-icon {
	font-size: 24rpx;
}

.tool-text {
	font-size: 18rpx;
	color: #666;
}

/* 主要内容区域 */
.main-content {
	flex: 1;
	display: flex;
	min-height: 0;
}

/* 左侧题目列表 */
.question-list {
	width: 180rpx;
	background: #fff;
	border-right: 1rpx solid #e0e0e0;
	padding: 10rpx;
	overflow-y: auto;
	flex-shrink: 0;
}

.question-item {
	padding: 12rpx;
	margin-bottom: 8rpx;
	border-radius: 6rpx;
	border: 1rpx dashed #ccc;
	text-align: center;
}

.question-item.active {
	background: #4DD0E1;
	border: 1rpx solid #4DD0E1;
}

.question-item.active .q-number,
.question-item.active .q-score {
	color: white;
}

.q-number {
	font-size: 22rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 4rpx;
}

.q-score {
	font-size: 18rpx;
	color: #ff6b6b;
}

/* 中央试卷区域 */
.paper-area {
	flex: 1;
	padding: 15rpx;
	background: #f0f0f0;
	min-width: 0;
}

.paper-image {
	width: 100%;
	height: 100%;
	background: #faf8f0;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	padding: 20rpx;
	overflow: auto;
	position: relative;
}

.paper-content {
	width: 100%;
	height: 100%;
	position: relative;
}

.question-text {
	margin-bottom: 40rpx;
	position: relative;
	line-height: 1.8;
	padding: 15rpx 0;
}

.q-label {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-right: 15rpx;
}

.handwriting {
	font-size: 32rpx;
	color: #333;
	font-family: cursive;
}

.score-mark {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 32rpx;
	font-weight: bold;
	color: #ff4444;
}

.score-mark.red {
	color: #ff4444;
}

/* 右侧打分区域 */
.scoring-area {
	width: 180rpx;
	background: #333;
	padding: 15rpx 10rpx;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	flex-shrink: 0;
	position: relative;
}

.full-score-btn {
	background: #4CAF50;
	color: white;
	padding: 15rpx 8rpx;
	border-radius: 8rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.zero-score-btn {
	background: #f44336;
	color: white;
	padding: 15rpx 8rpx;
	border-radius: 8rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.checkmark, .cross {
	font-size: 28rpx;
	font-weight: bold;
}

.btn-text {
	font-size: 18rpx;
}

.number-buttons {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.number-btn {
	background: #666;
	color: white;
	padding: 12rpx;
	border-radius: 6rpx;
	text-align: center;
	font-size: 24rpx;
	font-weight: bold;
}

.number-btn.active {
	background: #4DD0E1;
}

.clear-btn {
	background: #ff9800;
	color: white;
	padding: 8rpx;
	border-radius: 6rpx;
	text-align: center;
	font-size: 18rpx;
}

/* 底部提交按钮 */
.bottom-submit {
	position: absolute;
	bottom: 15rpx;
	right: 15rpx;
	width: auto;
	height: auto;
}

.submit-btn {
	background: #ff6b35;
	color: white;
	padding: 0;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
}
</style> 